<template>
	<div id="outInRecord">
		<div class="recordHead">
			<span class="recordTitle">出入记录</span>
			<span class="turnOff" @click="cancel()">关闭</span>
		</div>
		<div class="search">
			<el-select v-model="venueId" placeholder="所有场馆" @change="changeVenueHandle">
				<el-option v-for="ven in venueLists" :label="ven.venueName" :value="ven.venueId" :key="ven.venueId"></el-option>
			</el-select>
			<el-select v-model="fieldId" placeholder="所有场地">
				<el-option v-for="field in fieldLists" :label="field.fieldName" :value="field.fieldId" :key="field.fieldId"></el-option>
			</el-select>
			<el-date-picker v-model="startTime" type="date" placeholder="选择日期" @change="changeBookDate">
			</el-date-picker>
			<el-date-picker v-model="endTime" type="date" placeholder="选择日期" @change="changeBookDate">
			</el-date-picker>
			<el-button class="sel_btn" type="primary" @click="search">筛选</el-button>
		</div>
		<div class="list">
			<div class="list_head">
				<el-input class="qizhiDate" type='text' placeholder="请输入手机号" icon="search" @keyup.enter.native="search" :on-icon-click="search"
				 v-model="condition"></el-input>
			</div>
			<el-table :data="list">
				<el-table-column prop="phone" label="手机号">
				</el-table-column>
				<el-table-column prop="userName" label="姓名">
				</el-table-column>
				<el-table-column prop="venueName" label="场馆名称">
				</el-table-column>
				<el-table-column prop="fieldName" label="场地名称">
				</el-table-column>
				<el-table-column prop="enterTime" label="入场时间">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="pageNum" :total="totalCount"
				 @current-change="handleChangePagenum">
				</el-pagination>
			</div>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vFooter from "../../common/Footer.vue";

	export default {
		components: {
			vFooter
		},
		data() {
			return {
				list: [],
				condition: "",
				venueId: 0,
				fieldId: 0,
				venueLists: [],
				totalCount: 0,
				pageNum: 1,
				pageSize: 10,
				formInline: {
					user: "",
					region: ""
				},
				fieldLists: [{ fieldId: 0, fieldName: "全部场地" }],
				endTime: new Date(new Date().format("yyyy/MM/dd")),
				startTime: new Date(new Date().format("yyyy/MM/dd"))
			};
		},
		mounted() {
			this.getVenueRecordList();
			this.getVenueList();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//出入场记录列表
			getVenueRecordList() {
				let url = this.$util.domain + "/erp/api/v20/inout/queryrecord";
				this.list = [];

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						venueId: this.venueId,
						fieldId: this.fieldId,
						pageNum: parseInt(this.pageNum),
						endDate: this.endTime.format("yyyy-MM-dd"),
						startDate: this.startTime.format("yyyy-MM-dd"),
						keyWords: String(this.condition).trimLeft()
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let configList = response.data.data.data;
						this.totalCount = response.data.data.total;
						if (configList && configList.length > 0) {
							for (let i = 0; i < configList.length; i++) {
								let $index = i + 1,
									$phone = configList[i].phone,
									$userName = configList[i].name,
									$fieldName = configList[i].fieldName,
									$venueName = configList[i].venueName,
									$enterTime = new Date(configList[i].enterTime).format(
										"yyyy-MM-dd hh:mm"
									);

								this.list.push({
									index: $index,
									phone: $phone,
									userName: $userName,
									fieldName: $fieldName,
									enterTime: $enterTime,
									venueName: $venueName
								});
							}
						}
					}
				});
			},
			//场馆列表
			getVenueList() {
				let url = this.$util.domain + "/erp/api/v20/tools/venuelist";
				this.venueLists = [{ venueId: 0, venueName: "全部场馆" }];

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let resList = response.data.data;
						if (resList && resList.length > 0) {
							for (let i = 0; i < resList.length; i++) {
								let $venueId = resList[i].id,
									$venueName = resList[i].name;
								this.venueLists.push({
									venueId: $venueId,
									venueName: $venueName
								});
							}
						}
					}
				});
			},
			// 场地列表
			getFieldList(venueId) {
				let url = this.$util.domain + "/erp/api/v20/tools/fieldlist";
				this.fieldLists = [{ fieldId: 0, fieldName: "全部场地" }];

				this.$http({
					url,
					method: "GET",
					params: {
						venueId: venueId
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let fieList = response.data.data;
						if (fieList && fieList.length > 0) {
							for (let i = 0; i < fieList.length; i++) {
								let $id = fieList[i].id,
									$name = fieList[i].name;
								this.fieldLists.push({
									fieldId: $id,
									fieldName: $name
								});
							}
						}
					}
				});
			},
			// 更改场馆
			changeVenueHandle() {
				this.getFieldList(this.venueId);
				this.fieldId = 0;
			},
			//请求分页数据分页
			handleChangePagenum(val) {
				this.pageNum = val;
				this.getVenueRecordList();
			},
			// 关键字搜索
			search() {
				this.getVenueRecordList();
			},
			// 更改时间
			changeBookDate() {
				let stime = this.startTime.getTime();
				let etime = this.endTime.getTime();
				if (stime > etime) {
					this.$util.errorMsg("开始时间不能大于结束时间");
					return;
				}
			},
			cancel() {
				location.href = "/#/outInVenueManage";
			}
		}
	};
</script>

<style scoped>
	#outInRecord {
		background: #f0f3f4;
		height: calc(100% - 50px);
	}

	.list {
		height: calc(100% - 220px);
		margin: 20px 100px;
	}

	#outInRecord .el-select {
		width: 20%;
	}

	#outInRecord .el-date-editor.el-input {
		width: 130px;
	}

	.recordHead {
		height: 60px;
		background-color: #2d3243;
	}

	.recordTitle {
		color: #ffffff;
		line-height: 60px;
		padding-left: 50px;
	}

	.turnOff {
		color: #ffffff;
		float: right;
		padding-right: 50px;
		line-height: 60px;
		cursor: pointer;
	}

	.sel_btn {
		position: absolute;
		right: 120px;
		margin-top: 12px;
	}

	.search {
		margin: 20px 100px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	.qizhiDate {
		width: 250px;
	}
</style>